.ag-toggle-button {
    flex: none;
    width: unset;
    min-width: unset;
}

.ag-toggle-button-input-wrapper {
    position: relative;
    flex: none;
    min-width: var(--ag-toggle-button-width);
    max-width: var(--ag-toggle-button-width);
    height: var(--ag-toggle-button-height);
    background-color: var(--ag-toggle-button-off-background-color);
    transition: background-color 100ms;
    border-radius: calc(var(--ag-toggle-button-height) * 0.5);

    :where(.ag-toggle-button-input) {
        cursor: pointer;
        appearance: none;
        opacity: 0;
        margin: 0;
        display: block;
        min-width: var(--ag-toggle-button-width);
        max-width: var(--ag-toggle-button-width);
        height: var(--ag-toggle-button-height);
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        top: var(--ag-toggle-button-switch-inset);
        /* rtl:ignore */
        left: var(--ag-toggle-button-switch-inset);
        width: calc(var(--ag-toggle-button-height) - var(--ag-toggle-button-switch-inset) * 2);
        height: calc(var(--ag-toggle-button-height) - var(--ag-toggle-button-switch-inset) * 2);
        border-radius: 100%;
        /* rtl:ignore */
        transition: left 100ms;
        background-color: var(--ag-toggle-button-switch-background-color);
        pointer-events: none;
    }

    &.ag-checked {
        background-color: var(--ag-toggle-button-on-background-color);

        &::before {
            /* rtl:ignore */
            left: calc(100% - var(--ag-toggle-button-height) + var(--ag-toggle-button-switch-inset));
        }
    }

    &:focus-within {
        box-shadow: var(--ag-focus-shadow);
    }

    &.ag-disabled {
        opacity: 0.5;
    }
}
